<template>
  <div class="addVehicle-wrap vehicle">
    <!-- 已存在车辆 -->
    <div class="car-info" v-if="vehicleList.length !== 0">
      <div v-for="items in vehicleList" :key="items.id">
        <div class="clearfix top">
          <div class="fl box" @click="carClick(items)">
            <img class="fl" src="@/assets/img/icon/car.png" />
            <div class="fl center">
              <p>
                <span>客户姓名：</span>
                <span>{{items.username}}</span>
              </p>
              <p>
                <span>号牌号码：</span>
                <span>{{items.carNum}}</span>
              </p>
            </div>
          </div>
          <!-- <div class="fr">
            <p @click="addCar(items,1)">修改信息</p>
            <p @click="delCars(items,index)">删除车辆</p>
          </div> -->
        </div>
        <div class="bottom clearfix">
          <div class="fl">
            <p>车辆类型</p>
            <p>{{items.carType}}</p>
          </div>
          <span class="fl"></span>
          <div class="fl">
            <p>燃油类型</p>
            <p>{{items.carFuel}}</p>
          </div>
          <span class="fl"></span>
          <div class="fl">
            <p>注册日期</p>
            <!-- <p>{{getDate(items.createTime).o}}</p> -->
            <p>{{items.carRegNum.substring(0,4)+'年'+items.carRegNum.substring(4,6)+'月'+items.carRegNum.substring(6)+'日'}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增车辆 -->
    <div class="add-box" @click="addCar(0,0)">
      <img src="@/assets/img/icon/add.png" />
      <p>点击添加车辆</p>
    </div>
    <foot :navUrl="url"/>
  </div>
</template>

<script>
import { getDateStr, getDate } from '@/utils/index'
import { getLocal, setLocal,delLocal} from '@/utils/storage'
import foot from '@/views/footer.vue'
export default {
  name: 'vehicleInfo',
  data() {
    return {
      vehicleList: [],
      carUser: JSON.parse(getLocal('userInfo')),
      conventionParams: {},
      url:'home',
    }
  },
  created() {
    // if (!this.$route.params.state) {
    //   this.$router.go(-1)
    // } else {
    //   this.vehicleList = this.$route.params.vehicleList
    // }
    console.log('-------conventionParams---------',this.$route,this.$route.params.state === 'convention')
    /* if(!this.$route.params.state){
      this.$router.push('home');
    }else{
      if (this.$route.params.state === 'convention') {
        this.conventionParams = this.$route.params.conventionParams
      }
      
      if (!this.$route.params.vehicleList) {
        this.postCarInfo()
      } else {
        this.vehicleList = this.$route.params.vehicleList
      }
    } */
    this.postCarInfo()
  },
  mounted() {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
  },
  methods: {
    addCar(items, bol) {
      if (bol) {
        setLocal('edit','1')
        setLocal('info',items)
        this.$router.push({
          name: 'vehicleDetails',
        })
        
        // this.$router.push({ path: '/vehicleDetails', query: { edit: '1' } })
      } else {
        delLocal('edit')
        delLocal('info')
        this.$router.push({
          name: 'vehicleDetails',
        })
        
      }
    },
    // 查询车辆信息
    async postCarInfo() {
      let params = {
        userId: this.carUser.id
      }
      let res = await this.$api.PostCarInfo(params)
      console.log(res, '------------------- 查询车辆信息 ----------------')
      if (res) {
        if (res.status === 200) {
          this.vehicleList = res.data.list
          
        }
      }
    },
    // 删除车辆
    async delCarsFn(els, index) {
      let res = await this.$api.delCars({
        id: els.id
      })
      console.log(res, '------------------- 删除车辆 ----------------')
      if (res) {
        if (res.status === 200) {
          this.vehicleList.splice(index, 1)
        }
      }
    },
    // 提交预约
    async createOrder(items,str) {
      let params = {
        stationId: 1,
        carId: items.id,
        userId: items.userId,
        userSign: items.carAttachment1,
        type:3
      }
      let res = await this.$api.createOrder(params)
      if (res) {
        if (res.status === 200) {
          this.$router.push({
            name: 'orderPay',
            params: {
              carInfo: res.data
            }
          })
        }
      }
      
    },
    // 删除车辆
    delCars(els, index) {
      this.$dialog
        .confirm({
          title: '您确定要删除当前车辆信息吗？'
          // message: '弹窗内容'
        })
        .then(() => {
          this.delCarsFn(els, index)
        })
        .catch(() => {})
    },
    // 点击车辆
    carClick(items) {
      console.log('--------items---------',items)
      console.log('--------this.$route.params.state---------',this.$route.params.state)
      let state = getLocal('state')
      if (state === 'convention') {
        items.type = 1
        this.$router.push({
          name: 'makeAnAppointment',
          params: {
            state:state,
            carInfo: items
          }
        })
        //this.createOrder(items, 'convention')
      } else if(state === 'present') {
        // 到场预约
        this.createOrder(items)
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
    next()
  },
  components:{
    foot
  }
}
</script>

<style lang="less" scoped>
body {
  background-color: #f5f6f5;
}
.addVehicle-wrap {
  .car-info .top .box {
    width: 70%;
    height: inherit;
  }
  .car-info{
    .top{
      .fr{
        p{
          font-size: 0.35rem;
          width: 2rem;
          height: 0.6rem;
          line-height: 0.6rem;
        }
      }
    }
  }
}
</style>
